<template>
  <view class="index">
    <!-- 1.0 搜索框 -->
    <view class="search view">
      <u-search placeholder="带 你 吃 遍 顺 职 院"
                :show-action="false"
                v-model="keyword"
                input-align="center"></u-search>
    </view>
    <!-- 2.0 通知栏 -->
    <view class="notice view">
      <u-notice-bar border-radius="10"
                    :list="notice"></u-notice-bar>
    </view>
    <!-- 3.0 轮播图 -->
    <view class="banner view">
      <u-swiper :list="banner"></u-swiper>
    </view>
    <!-- 4.0 分类 -->
    <view class="product view">
      <u-grid :col="5"
              :border="false">
        <u-grid-item v-for="item in product"
                     :key="item.icon">
          <u-icon :name="item.icon"
                  :size="46"
                  custom-prefix="custom-icon"></u-icon>
          <view class="grid-text">{{ item.title }}</view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 5.0 标签栏 -->
    <view class="tabs">
      <u-sticky @fixed="sticky = true"
                @unfixed="sticky = false">
        <u-tabs :list="floor"
                :current="currentIndex"
                @change="shopListChangeFn"></u-tabs>
        <u-gap v-show="sticky"
               height="5"
               bg-color="#bbb"></u-gap>
      </u-sticky>
    </view>
    <!-- 6.0 列表 -->
    <view class="shop view">
      <MyShopCard v-for="(item, index) in floor[currentIndex].shopList"
                  :key="index"
                  :shop="item"></MyShopCard>
      <!-- 触底加载更多 -->
      <u-loadmore v-if="currentIndex"
                  :status="floor[currentIndex].status"
                  color="#c0c4cc"
                  @loadmore="loadmoreFn" />
    </view>
    <!-- tabbar -->
    <u-tabbar :list="tabBar"
              :mid-button="true"></u-tabbar>
  </view>
</template>

<script>
import { imgUrl } from '@/filters/index.js'
import MyShopCard from '@/components/MyShopCard/MyShopCard.vue'
import { mapGetters } from 'vuex'
export default {
  computed: mapGetters(['tabBar']), // tabbar数据
  data() {
    return {
      notice: ['全场最低八折优惠', '新人首单全免'], //通知栏
      banner: ['https://cdn.uviewui.com/uview/swiper/1.jpg'], //轮播图
      product: [{ icon: 'mifan-', title: '经典饭食' }], // 分类图标
      floor: [{ name: '店长推荐' }], // 店铺列表
      keyword: '', //搜索关键词
      currentIndex: 0, // tab 栏
      sticky: false, //吸顶
    }
  },
  onLoad() {
    this.initFn() //初始化数据
  },
  methods: {
    //初始化数据
    async initFn() {
      // 轮播图
      const { banner } = await this.$u.api.banner()
      this.banner = banner.map((item) => imgUrl(item.banner_url))
      // tab 栏目
      const { tabs } = await this.$u.api.tabs()
      this.floor = tabs.map((item) => ({
        name: item.tab_name,
        id: item.tab_id,
        pagenum: 1,
        shopList: [],
        status: 'loadmore',
      }))
      // notice 通知
      const { notices } = await this.$u.api.notice()
      this.notice = notices.map((item) => item.notice)
      // 店铺分类
      const { product } = await this.$u.api.product()
      this.product = product.map((item) => ({
        icon: item.product_icon,
        title: item.product_name,
        id: item.product_id,
      }))
      this.getShopListFn() //获取店铺
    },
    // 加载更多
    loadmoreFn() {
      if (
        !this.currentIndex ||
        this.floor[this.currentIndex].status === 'nomore'
      )
        return
      // 节流
      this.$u.throttle(() => {
        // console.log('节流了')
        // 改变状态
        this.floor[this.currentIndex].status = 'loading'
        // 页码增加
        this.floor[this.currentIndex].pagenum++
        // 获取列表
        this.getShopListFn()
      }, 500)
      /*
				防抖：debounce
				节流：throttle(func, wait = 500, immediate = true)
				func - 回调函数
				wait - 节流时间/毫秒
				immediate - true 计时前触发，flase 计时完触发
			 */
    },
    // 切换 tab 栏目
    shopListChangeFn(index) {
      this.currentIndex = index
    },
    // 获取店铺
    async getShopListFn() {
      // 分类名，传参用
      const { name, pagenum, shopList } = this.floor[this.currentIndex]
      // 发送请求
      let res = []
      // 配送类型
      if (this.currentIndex === 1 || this.currentIndex === 2)
        res = await this.$u.api.getShop({
          delivery_method: name,
          pagenum,
        })
      // 全部店铺
      else if (this.currentIndex === 6)
        res = await this.$u.api.getShop({
          pagenum,
        })
      // 热销店铺
      else if (this.currentIndex === 0) res = await this.$u.api.getShopHot()
      // 铺位
      else
        res = await this.$u.api.getShop({
          shop_floor: name,
          pagenum,
        })

      console.log('店铺列表：' + res.msg)
      // 再无数据
      if (!res.shops.length)
        return (this.floor[this.currentIndex].status = 'nomore')
      // 排序
      const list = res.shops.sort((x, y) => y.hot_number - x.hot_number)
      // 追加
      if (shopList) shopList.push(...list)
      // 变回原状态 - 防抖
      this.floor[this.currentIndex].status = 'loadmore'
      // this.$u.debounce(
      // 	() => setTimeout(() => (this.floor[this.currentIndex].status = 'loadmore'), 500),
      // 	1000
      // );
    },
  },
  watch: {
    currentIndex(index) {
      if (!this.floor[index].shopList.length) this.getShopListFn()
    },
  },
  // 触底生命周期
  onReachBottom() {
    this.loadmoreFn()
  },
  components: {
    MyShopCard,
  },
  name: 'home',
}
</script>

<style scoped lang="scss">
.view {
  padding: 0 20rpx;
}
.index {
  .search {
    margin: 20rpx 0;
  }
  .product {
    .grid-text {
      font-size: 25rpx;
      margin-top: 20rpx;
      color: $u-tips-color;
    }
  }
  .notice {
    margin-bottom: 30rpx;
  }
  .shop {
    margin-top: 20rpx;
  }
  .fixed {
    width: 100vw;
    // margin-left: -20rpx;
    // border-bottom: 1px solid #ccc;
    // box-shadow: 1px 0px 0px 0px #888888;
  }
}
</style>
